<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <link rel="stylesheet"
          href="../../res/zTree_v3-master/css/metroStyle/metroGreen.css"
          type="text/css">
    <script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript" src="../../res/layui/layui.js"></script>
    <script type="text/javascript" src="../../res/module/common.js"></script>
    <script type="text/javascript" src="../../res/module/treeSelect/treeSelect.js"></script>
    <title>操作界面</title>
</head>
<body>
<div style="margin-top: 10px; padding-right: 27px;">
    <form class="layui-form" id="idform" action="">
        <div class="layui-form-item">
            <label for="" class="layui-form-label">上级模块</label>
            <div class="layui-input-block">
                <input name="tMModId" type="text" id="tree" placeholder="不选为根模块"
                       lay-filter="tree" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模块名称</label>
            <div class="layui-input-block">
                <input type="text" id="modName" name="modName" lay-verify="title"
                       autocomplete="off" placeholder="模块名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" id="modSite" name="modSite" lay-verify="title"
                       autocomplete="off" placeholder="URL" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea id="modComment" name="modComment" placeholder="备注" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit
                        lay-filter="demo1">立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    var treeSelect = null;
        layui.use(['treeSelect', 'form'], function () {
        setting = {
            view: {
                selectedMulti: true
            },
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: null
                }
            },
        }
        treeSelect = layui.treeSelect;
        if(getQueryStringOne("modId")!= ''){
            getOne(treeSelect,setting);
        }else{
            gettree(treeSelect,setting);
        }
    });
</script>
<script>
    //Demo
    layui.use(['form','layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        //监听提交
        form.on('submit(demo1)', function (data) {
            var index1 = layer.load(2); //添加laoding,0-2两种方式
            var form = new FormData(document.getElementById("idform"));
            $.ajax({
                url: "../../../module/addOrUp?modId="
                    + getQueryStringOne("modId") + "",
                type: "post",
                data: form,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function (obj) {
                    layer.close(index1);    //返回数据关闭loading
                    if (obj.status == 1) {
                        //弹出需求
                        layer.msg(obj.msg, {
                            icon: 1,
                            time: 1000
                            //一秒关闭 如果不配置是3秒
                        }, function () {
                            //关闭 层
                            var index = parent.layer
                                .getFrameIndex(window.name);//得到iframe 层的索引
                            parent.layui.table.reload('testReload');//重载父页表格，参数为表格ID
                            parent.layer.close(index);//关闭改层
                            //刷新主界面
                            //parent.location.reload();
                        });
                    } else {
                        layer.msg(obj.msg);
                    }
                },
                error: function (e) {

                }
            });
            return false;
        });
    });

    function gettree(treeSelect,setting){
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: "../../../module/selectXiaLa",
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '不选为根节点',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            setting: setting,
            // 点击回调
            click: function (d) {
                console.log(d.current.id);
                document.getElementById("tree").value = d.current.id;
            },
            check: function (d) {
                var value = "";
                for (var i = 0; i < d.current.length; i++) {
                    value += d.current[i].id;
                    if (i < d.current.length - 1) {
                        value += ","
                    }
                }
                document.getElementById("tree").value = value;

            },
            // 加载完成后的回调函数
            success: function (d) {
            }
        });
    }

    /**
     * 赋值方法
     */
    function getOne(treeSelect,setting){
        var one = getQueryStringOne("modId");
        if (one != "") {
            var url = "../../../module/selectOne";
            var data = {modId: getQueryStringOne("modId")};
            $.post(url, data, function (obj) {
                $("#modName").val(obj.modName);
                $("#modSite").val(obj.modSite);
                $("#modComment").val(obj.modComment);
                $("#tree").val(obj.tMModId);

                gettree(treeSelect,setting);

            }, 'json')

        }
    }

    //得到地址栏上的参数  可以 是中文
    function getQueryStringOne(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURI(r[2]);
        return null;
    }
</script>
</body>
</html>